<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="tabIndex" @tab-click="getList(1)">
          <el-tab-pane
            v-for="(item, index) in headeNum"
            :key="index"
            :name="item.id.toString()"
            :label="item.name"
          />
        </el-tabs>
        <el-form size="small" inline label-width="100px" v-if="tabIndex == 0">
          <el-form-item
            label="姓名"
            class="width100"
            style="display: inline-block;"
          >
            <el-input
              v-model="tableFrom.real_name"
              placeholder="请输入姓名"
              class="selWidth"
              size="small"
              @keyup.enter.native="getList(1)"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                size="small"
                class="el-button-solt"
                @click="getList(1)"
              />
            </el-input>
          </el-form-item>
          <el-form-item label="所在区县" prop="city">
            <el-cascader
              style="display: block;"
              v-model="tableFrom.city"
              :props="searchCityProps"
              :options="searchCityList"
              :placeholder="'请选择'"
              @change="handleCascaderChange"
              clearable=""
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="所属公司"
            class="width100"
            style="display: inline-block;"
          >
            <el-cascader
              style="display: block;"
              v-model="tableFrom.superior_cid"
              :props="companyProps"
              :options="companyList"
              :placeholder="'请选择'"
              @change="getList(1)"
              clearable=""
            ></el-cascader>
          </el-form-item>
          <el-button size="small" type="primary" @click="resetForm"
            >重置</el-button
          >
        </el-form>
        <el-button
          size="small"
          type="primary"
          @click="editSwitch('')"
          v-if="tabIndex == 0"
          >添加员工</el-button
        >

        <el-upload
          style="display: inline-block;"
          class="upload-demo"
          :headers="myHeaders"
          :action="ptfileUrl"
          :on-success="handleSuccess"
          :show-file-list="true"
          accept=".xlsx,.xls"
          :file-list="fileList"
          :before-upload="beforeAvatarUpload"
          v-if="tabIndex == 1"
        >
          <el-button size="small" type="primary">导入员工数据</el-button>
          <el-button size="small" type="primary" @click.stop="getModule"
            >下载模板</el-button
          >
          <div slot="tip" class="el-upload__tip">
            只能上传xls/xlsx文件，且不超过2M，（表头模板：A1 姓名，B1 身份证，C1
            手机号，D1 性别（1 男 2女））
          </div>
        </el-upload>

        <!-- <el-link type="primary" :href="`${roterPre}` + '/static/example.xlsx'" download="靓号导入模板.xlsx">下载模板</el-link> -->

        <div
          style="padding:10px 0; margin-top:20px;border-top:1px solid #ddd; border-bottom:1px solid #ddd"
          v-if="tabIndex == 1"
        >
          执行列表
        </div>
      </div>

      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        name="m1"
        :row-key="
          row => {
            return row.card_code;
          }
        "
        v-show="tabIndex == 0"
      >
        <el-table-column prop="real_name" label="员工姓名" />
        <el-table-column prop="card_code" label="身份证号" />
        <el-table-column prop="company" label="公司名称" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="sale_count" label="开卡数量" />
        <el-table-column prop="status" label="注册状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0" style="color:#e6a23c;">
              未注册
            </div>
            <div v-else-if="scope.row.status == 1" style="color: #67c23a;">
              已注册
            </div>
            <div v-else-if="scope.row.status == 2" style="color:#f56c6c;">
              已删除
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="team_count" label="推广人数" />
        <el-table-column prop="sale_open_count" label="激活数量" />
        <el-table-column prop="sale_save_count" label="首充数量" />
        <el-table-column prop="tool" label="操作" min-width="120">
          <template slot-scope="scope">
            <el-link type="primary" @click="editSwitch(scope.row)" class="link"
              >编辑</el-link
            >
            <!-- <el-link type="danger" @click="deleteStaff(scope.row)"
              >删除员工</el-link
            > -->
            <el-link type="primary" @click="onDetails(scope.row)"
              >查看业绩</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        name="m1"
        :row-key="
          row => {
            return row.id;
          }
        "
        v-show="tabIndex == 1"
      >
        <el-table-column prop="id" label="ID" min-width="50" />
        <el-table-column prop="type" label="类型" min-width="120">
          <template slot-scope="scope">
            <span>（{{ scope.row.file_name }}）</span>
          </template>
        </el-table-column>
        <el-table-column prop="page_count" label="已执行总数" />
        <el-table-column prop="success_sum" label="成功执行数量" />
        <el-table-column prop="create_time" label="导入时间" />
        <el-table-column prop="status" label="状态" min-width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="warning"
              >等待执行</el-tag
            >
            <el-tag v-if="scope.row.status == 1" type="danger">执行中</el-tag>
            <el-tag v-if="scope.row.status == 2" type="success"
              >执行完成</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="tool" label="操作" min-width="120">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.err_msg != '' && scope.row.err_msg != null"
              type="warning"
              @click="lookError(scope.row)"
              >查看错误</el-link
            >
            <el-link
              style="margin-left: 15px;"
              type="success"
              @click="downLoad(scope.row)"
              >下载文件</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!--账户详情-->
    <el-dialog
      :title="`${activeName}：${uid}`"
      :visible.sync="visibleDetail"
      width="1000px"
      :before-close="Close"
    >
      <user-details
        v-if="visibleDetail"
        ref="userDetails"
        :uid="uid"
        @close="Close"
      />
    </el-dialog>

    <el-drawer title="错误信息" :visible.sync="drawer">
      <div
        style="padding:20px; box-sizing: border-box; height: 100vh; overflow-y: auto;"
        v-html="direction"
      />
    </el-drawer>

    <!-- 新增员工信息 -->
    <el-dialog
      title="新增员工"
      :visible.sync="add_status"
      width="500px"
      @close="clearBack('addRef')"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" :rules="rules" ref="addRef">
        <el-form-item label="员工姓名" prop="real_name">
          <el-input v-model="addForm.real_name" placeholder="请输入员工姓名" />
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input
            v-model="addForm.superior_cid"
            placeholder="请选择所属公司"
            disabled
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="addForm.sex" :label="1">男</el-radio>
          <el-radio v-model="addForm.sex" :label="2">女</el-radio>
        </el-form-item>
        <!-- <el-form-item label="家庭地址" prop="address">
          <el-input v-model="addForm.address" placeholder="请输入家庭地址" />
        </el-form-item> -->
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="addForm.phone" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="证件类型" prop="company">
          <el-select v-model="addForm.card_type" placeholder="请选择">
            <el-option
              v-for="item in cardTypeList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop="card_code">
          <el-input v-model="addForm.card_code" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="所在区域" prop="cityId">
          <el-cascader
            style="display: block;"
            v-model="addForm.cityId"
            :props="cityProps"
            :options="cityList"
            placeholder="请选择"
            @change="changeCity"
            ref="cascader"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearBack('addRef')">取 消</el-button>
        <el-button type="primary" @click="submitAddForm()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑员工信息 -->
    <el-dialog
      title="编辑员工"
      :visible.sync="edit_status"
      width="700px"
      @close="clearBack('editRef')"
      :close-on-click-modal="false"
    >
      <div class="header-box">
        <div class="company-box">
          <div class="company-info">
            <div class="item">
              <div>姓名：{{ editForm.real_name }}</div>
              <div>
                性别：<span v-if="editForm.sex == 1">男</span
                ><span v-else-if="editForm.sex == 2">女</span
                ><span v-else>未知</span>
              </div>
            </div>
            <div class="item">
              <div>身份证号：{{ editForm.card_code }}</div>
              <div>所属公司：{{ editForm.company }}</div>
            </div>
            <div class="item">
              <div>
                状态：<span v-if="editForm.status == 1">已注册</span
                ><span v-else-if="editForm.status == 0">未注册</span
                ><span v-else-if="editForm.status == 2">已删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-form :model="editForm" :rules="editRules" ref="editRef">
        <el-form-item label="家庭地址" prop="address">
          <el-input v-model="editForm.address" placeholder="请输入家庭地址" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="所在区域" prop="cityId">
          <el-cascader
            style="display: block;"
            v-model="editForm.cityId"
            :props="cityProps"
            :options="cityList"
            placeholder="请选择"
            @change="changeEditCity"
            ref="editCascader"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearBack('editRef')">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  staffList,
  staffImportlist,
  staffEdit,
  staffDelete,
  addStaff
} from "@/api/staff";
import userDetails from "./userDetails";
import SettingMer from "@/libs/settingMer";
import { getToken } from "@/utils/auth";
import { KsCity } from "@/api/staff.js";
import { roterPre } from "@/settings";
import { citySubLst, companySubList } from "@/api/company.js";
import Cookies from "js-cookie";
export default {
  name: "staffList",
  components: { userDetails },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请填写手机号!"));
      }
      if (!/^1[23456789]\d{9}$/.test(value) && value) {
        callback(new Error("手机号格式不正确!"));
      } else {
        callback();
      }
    };
    // 检查号码是否符合规范，包括长度，类型
    const isCardNo = (rule, card, callback) => {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
      if (reg.test(card) === false) {
        return callback(new Error("请输入正确的身份证号码"));
      } else {
        callback();
      }
    };
    return {
      ptfileUrl: SettingMer.https + "/job/import/apply",
      myHeaders: { "X-Token": getToken() },
      roterPre: roterPre,
      tabIndex: 0,
      headeNum: [
        {
          id: 0,
          name: "员工列表"
        },
        {
          id: 1,
          name: "员工数据导入"
        }
      ],
      fileList: [],
      loadingAll: null,
      tableData: [],
      listLoading: false,
      tableFrom: {
        page: 1,
        limit: 20,
        real_name: "",
        province_id: "",
        city_id: "",
        district_id: "",
        superior_cid: "",
        city: ""
      },
      activeName: "",
      uid: "",
      visibleDetail: false,
      drawer: false,
      direction: "",
      add_status: false,
      editCard: "",
      addForm: {
        cityId: "",
        real_name: "",
        province_id: "",
        city_id: "",
        district_id: "",
        city: "",
        phone: "",
        sex: "",
        superior_cid: "",
        company: "",
        card_type: 1
      },
      editForm: {
        cityId: "",
        real_name: "",
        province_id: "",
        city_id: "",
        district_id: "",
        city: "",
        phone: "",
        sex: "",
        superior_cid: "",
        company: "",
        card_type: 1
      },
      edit_status: false,
      placeholderText: "",
      rules: {
        city: [{ required: true, message: "请选择所属地区", trigger: "blur" }],
        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
        card_code: [{ required: true, validator: isCardNo, trigger: "blur" }],
        real_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }]
      },
      editRules: {
        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
        card_code: [{ required: true, validator: isCardNo, trigger: "blur" }],
        cityId: [{ required: true, message: "请选择所属地区", trigger: "blur" }]
      },
      cardTypeList: [
        {
          value: 1,
          text: "身份证"
        },
        {
          value: 2,
          text: "港澳台通行证"
        },
        {
          value: 3,
          text: "台湾身份证"
        },
        {
          value: 4,
          text: "香港身份证"
        },
        {
          value: 5,
          text: "澳门身份证"
        },
        {
          value: 9,
          text: "其他"
        }
      ],
      cityList: [],
      cityProps: {
        lazy: true,
        label: "area_name",
        value: "id",
        that: this,
        async lazyLoad(node, resolve) {
          const { level, data } = node;
          const parentCode = level === 0 ? 0 : data.id;
          const nodes = await this.that.getRemoteData(parentCode, level);
          // 去除重复节点
          let nodeFilter = nodes.filter(n => {
            if (!this.that.cityList.includes(n.value)) {
              return n;
            }
          });
          resolve(nodeFilter);
        }
      },
      searchCityList: [],
      searchCityProps: {
        lazy: true,
        label: "name",
        value: "id",
        that: this,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          const { level, data } = node;
          KsCity(data ? data.id : 0)
            .then(res => {
              const nodes = res.data.city.map(item => ({
                id: item.id,
                name: item.area_name,
                leaf: level >= 2
              }));
              resolve(nodes);
            })

            .catch(err => {
              this.$message.error(err.message);
            });
        }
      },
      companyList: [],
      companyProps: {
        lazy: true,
        label: "name",
        value: "id",
        that: this,
        checkStrictly: true,
        emitPath: false,
        lazyLoad(node, resolve) {
          const { level, data } = node;
          companySubList(data ? data.id : 0)
            .then(res => {
              const nodes = res.data.list.map(item => {
                let limit = 1;
                if (this.that.adminInfo.company_type == 2) {
                  limit = 1;
                } else if (
                  this.that.adminInfo.company_type == 0 ||
                  this.that.adminInfo.company_type == 1
                ) {
                  limit = 1;
                } else if (this.that.adminInfo.company_type == 3) {
                  limit = 0;
                }

                return {
                  id: item.id,
                  name: item.name,
                  leaf: level >= limit
                };
              });
              resolve(nodes);
            })

            .catch(err => {
              this.$message.error(err.message);
            });
        }
      },
      adminInfo: {}
    };
  },
  mounted() {
    this.getList();
    const adminInfo = Cookies.get("AdminInfo");
    this.$set(this, "adminInfo", JSON.parse(adminInfo));
  },
  methods: {
    // 账户详情
    onDetails(row) {
      this.$router.push({
        path: roterPre + "/staff/staffDetail",
        query: { id: row.card_code }
      });
    },
    // 上传成功
    handleSuccess(response) {
      if (response.status === 200) {
        this.$message.success(response.message);
      } else {
        this.$message.error(response.message);
      }
    },
    /**
     * 上传前
     * @param {Object} file
     */
    beforeAvatarUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 8;
      if (!isLt10M) {
        this.$message.error("上传文件单个不能超过 8MB!");
        return false;
      }
      return true;
    },
    Close() {
      this.visibleDetail = false;
    },
    resetForm() {
      this.tableFrom.city = "";
      this.tableFrom.real_name = "";
      this.tableFrom.company = "";
      this.tableFrom.page = 1;
      this.tableFrom.superior_cid = "";
      this.getList(1);
    },
    // 取消第三方订单绑定

    clearBack(form) {
      this.add_status = false;
      this.edit_status = false;
      this.$nextTick(() => {
        this.$refs[form].resetFields();
      });
    },
    /**
     * 查看錯誤
     * @param {Object} e
     */
    lookError(e) {
      this.drawer = true;
      this.direction = "";
      if (e.err_msg != "" && e.err_msg != null) {
        const arr = e.err_msg.split("|");

        arr.find(res => {
          this.direction += `<p>${res}</p>`;
        });
      }
    },
    handleCascaderChange(value) {
      console.log(value);
      // 处理级联选择器值改变事件
      if (value && value.length > 0) {
        switch (value.length) {
          case 1:
            this.tableFrom.province_id = value[0];
            this.tableFrom.city_id = "";
            this.tableFrom.district_id = "";
            break;
          case 2:
            this.tableFrom.province_id = value[0];
            this.tableFrom.city_id = value[1];
            this.tableFrom.district_id = "";
            break;
          case 3:
            this.tableFrom.province_id = value[0];
            this.tableFrom.city_id = value[1];
            this.tableFrom.district_id = value[2];
            break;
        }
      } else {
        this.tableFrom.province_id = "";
        this.tableFrom.city_id = "";
        this.tableFrom.district_id = "";
      }
      this.getList(1);
    },
    getSelectedArray(value) {
      const result = [];
      let options = this.cityList;

      for (let val of value) {
        const option = options.find(option => option.id === val);
        if (option) {
          result.push(option);
          options = option.children || [];
        } else {
          break;
        }
      }

      return result;
    },
    //获取添加公司城市选择文本
    changeCity(val) {
      if (val) {
        const cascader = this.$refs.cascader;
        const selectedNodes = cascader.getCheckedNodes();
        this.addForm.city = selectedNodes[0].pathLabels.join("-");
        this.addForm.province_id = selectedNodes[0].path[0];
        this.addForm.city_id = selectedNodes[0].path[1];
        this.addForm.district_id = selectedNodes[0].path[2];
      } else {
        this.addForm.city = "";
        this.addForm.province_id = "";
        this.addForm.city_id = "";
        this.addForm.district_id = "";
      }
    },
    //获取编辑公司城市选择文本
    changeEditCity(val) {
      if (val.length > 0) {
        const cascader = this.$refs.editCascader;
        const selectedNodes = cascader.getCheckedNodes();
        this.editForm.city = selectedNodes[0].pathLabels.join("-");
        this.editForm.province_id = selectedNodes[0].path[0];
        this.editForm.city_id = selectedNodes[0].path[1];
        this.editForm.district_id = selectedNodes[0].path[2];
      } else {
        this.editForm.city = "";
        this.editForm.province_id = "";
        this.editForm.city_id = "";
        this.editForm.district_id = "";
      }
    },
    // 删除员工
    deleteStaff(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          staffDelete(row.card_code)
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            })
            .catch(e => {
              this.$message.error(e.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //获取子公司列表
    getCompanySubList() {
      companySubList().then(res => {
        this.companyList = res.data.list;
      });
    },

    // 列表
    getList(num) {
      this.listLoading = true;
      this.tableFrom.page = num || this.tableFrom.page;
      this.tableData.data = [];

      let param = this.tableFrom;
      if (this.tabIndex == 0) {
        staffList(param)
          .then(res => {
            this.$set(this.tableData, "data", res.data.list);
            this.tableData.total = res.data.count;
            this.listLoading = false;
          })
          .catch(res => {
            this.listLoading = false;
            this.$message.error(res.message);
          });
      } else if (this.tabIndex == 1) {
        const param = {
          page: this.tableFrom.page,
          limit: this.tableFrom.limit
        };
        staffImportlist(param)
          .then(res => {
            this.tableData.data = res.data.list;
            this.tableData.total = res.data.count;
            this.listLoading = false;
          })
          .catch(res => {
            this.listLoading = false;
            this.$message.error(res.message);
          });
      }
    },
    editSwitch(row) {
      if (row) {
        this.editCard = row.card_code;
        this.editForm.real_name = row.real_name;
        this.editForm.phone = row.phone;
        this.editForm.card_code = row.card_code;
        this.editForm.city = row.city;
        this.editForm.company = row.company;
        this.editForm.status = row.status;
        this.editForm.province_id = row.province_id;
        this.editForm.district_id = row.district_id;
        this.editForm.city_id = row.city_id;
        this.editForm.sex = row.sex;
        this.editForm.cityId = [row.province_id, row.city_id, row.district_id];
        this.editForm.address = row.address;
        this.edit_status = true;
      } else {
        this.add_status = true;
      }
    },
    getRemoteData(parentCode, level) {
      return new Promise((resolve, reject) => {
        citySubLst(parentCode).then(res => {
          //根据当前登录账号所属筛选指定地区
          if (res.data.data && res.data.data.province_id && level == 0) {
            //去除其他省
            const arr = this.formatData(
              res.data.list.filter(
                item => item.id == res.data.data.province_id
              ),
              level
            );

            resolve(this.formatData(arr, level));
          } else if (res.data.data && res.data.data.city_id && level == 1) {
            //去除其他市
            const arr = this.formatData(
              res.data.list.filter(item => item.id == res.data.data.city_id),
              level
            );
            resolve(this.formatData(arr, level));
          } else if (res.data.data && res.data.data.district_id && level == 2) {
            //去除其他区
            const arr = this.formatData(
              res.data.list.filter(
                item => item.id == res.data.data.district_id
              ),
              level
            );
            resolve(this.formatData(arr, level));
          } else {
            resolve(this.formatData(res.data.list, level));
          }
        });
      });
    },
    formatData(data, level) {
      let districtType = "";
      switch (level) {
        case 0:
          districtType = "province";
          break;
        case 1:
          districtType = "city";
          break;
        case 2:
          districtType = "district";
          break;
        default:
          break;
      }
      return data.map(item => {
        return {
          districtType,
          id: item.id,
          area_name: item.area_name,
          leaf: level >= 2
        };
      });
    },
    // 修改员工信息
    submitEditForm() {
      const params = {
        real_name: this.editForm.real_name,
        province_id: this.editForm.province_id,
        city_id: this.editForm.city_id,
        district_id: this.editForm.district_id,
        city: this.editForm.city,
        phone: this.editForm.phone
      };

      this.$refs["editRef"].validate(valid => {
        if (valid) {
          this.$confirm("确认修改员工信息吗")
            .then(res => {
              if (res == "confirm") {
                staffEdit(this.editCard, params).then(res => {
                  this.$message.success("成功！");
                  this.add_status = false;
                  this.edit_status = false;
                  this.getList(1);
                });
              }
            })
            .catch(res => {
              this.$message.error(res.message);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加员工信息
    submitAddForm() {
      const params = JSON.parse(JSON.stringify(this.addForm));
      delete params.cityId;
      params.city;
      this.$refs["addRef"].validate(valid => {
        if (valid) {
          addStaff(params)
            .then(res => {
              this.$message.success("添加成功");
              this.add_status = false;
              this.getList(1);
            })
            .catch(e => {
              this.$message.error(e);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    getModule() {
      const url =
        process.env.VUE_APP_BASE_API +
        "/storage/excel/20240321/员工导入模版.xls";
      window.location.href = url;
    },

    /**
     * 下载文件
     * @param {Object} e
     */
    downLoad(e) {
      let url = e.url_path.replace(
        "/home/wwwroot/tv.ytuy.cn",
        "https://tv.ytuy.cn"
      );
      url = url.replace("public/", "");
      window.location.href = url;
    },

    pageChange(page) {
      this.tableFrom.page = page;
      this.getList("");
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList("");
    }
  }
};
</script>

<style scoped lang="scss">
.header-box {
  margin-bottom: 16px;
}
.header {
  display: flex;
  width: 100%;
  height: 61px;
  align-items: center;
  line-height: 24px;
  padding-left: 27px;
  font-size: 18px;
  color: #333333;
  border-bottom: 1px solid #eeeeee;

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin-right: 4px;
    background: #385be1;
  }
}

.company-box {
  display: flex;
  width: 100%;
  height: 221px;
  .company-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: url("https://tv.ytuy.cn/uploads/def/20240318/f69d0320293ee4c344e236f58e55c44d.png");
    background-size: 100% 100%;
    padding: 0 16px;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    font-size: 16px;
    color: #ffffff;
    .item {
      display: flex;
      justify-content: space-between;
    }
  }
}
/deep/ .readyCiyt {
  .el-input__inner::placeholder {
    color: #606266;
  }

  /* 谷歌 */
  .el-input__inner::-webkit-input-placeholder {
    color: #606266;
  }

  /* 火狐 */
  .el-input__inner:-moz-placeholder {
    color: #606266;
  }

  /*ie*/
  .el-input__inner:-ms-input-placeholder {
    color: #606266;
  }
}
.link {
  margin-right: 6px;
}
</style>
